<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div class="header">
        <div>
          <el-input v-model="searchTerms.input" placeholder="请输入内容" class="search-input" @change="search" />
          <el-button type="success" class="do-btn" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button type="danger" icon="el-icon-bell" @click="toSendAllMsg">批量提醒</el-button>
        </div>
        <column-controller :check-items="th" style="float:right;" @change="columnCheck" />
      </div>
      <el-table :data="tableData" :default-sort="{prop: 'id', order: 'descending'}" border style="width: 100%;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" header-align="center" align="center" />
        <el-table-column v-if="th[0].check" prop="customer_name" label="购买用户" min-width="100" header-align="center" align="center" />
        <el-table-column v-if="th[1].check" prop="customer_phone" label="手机号码" min-width="120" header-align="center" align="center" />
        <el-table-column v-if="th[2].check" prop="order_num" label="订单号" min-width="140" header-align="center" align="center" />
        <el-table-column v-if="th[3].check" prop="goods_name" label="商品名称" min-width="220" header-align="center" align="center" />
        <el-table-column v-if="th[4].check" :filters="filter.type" :filter-method="filterTag" filter-placement="bottom-end" prop="goods_type" label="商品类型" min-width="110" header-align="center" align="center" />
        <el-table-column v-if="th[5].check" prop="goods_price" label="商品金额" min-width="120" header-align="center" align="center" />
        <el-table-column v-if="th[6].check" prop="manage" label="负责人" min-width="80" header-align="center" align="center" />
        <el-table-column v-if="th[7].check" prop="date" label="购买时间" min-width="130" header-align="center" align="center" />
        <el-table-column v-if="th[8].check" prop="remainDays" label="剩余天数" min-width="110" header-align="center" align="center" sortable />
        <el-table-column v-if="th[9].check" label="状态" min-width="120" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status===0?'danger':'success'" >{{ scope.row.status===0?'未联系':'已联系' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="160" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <el-tooltip content="电话联系" placement="top">
              <el-button type="primary" size="small" icon="el-icon-phone" circle @click="toCall(scope.row)" />
            </el-tooltip>
            <el-tooltip content="短信提醒" placement="top">
              <el-button type="success" size="small" icon="el-icon-message" circle class="bg-green" @click="toSendMsg(scope.row)" />
            </el-tooltip>
            <el-button type="danger" size="small" icon="el-icon-close" circle @click="toDelete" />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page.sync="currentPage" :page-size="pageSize" :total="total" class="pagination" layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange" />
    </el-card>
  </div>
</template>

<script>
import { ColumnController } from '../components'

export default {
  components: { ColumnController },
  data() {
    return {
      searchTerms: {
        input: ''
      },
      currentPage: 1,
      pageSize: this.$store.getters.userInfo.pageSize,
      total: 30,
      filter: {
        type: [{ text: '小程序', value: '小程序' }, { text: '腾讯云', value: '腾讯云' }]
      },
      multipleSelection: [],
      tableData: [{
        customer_name: '朱峰',
        customer_phone: '15622283843',
        order_num: '19054894531515',
        goods_name: '分销商城小程序(营销版+客服)',
        goods_type: '小程序',
        goods_price: '1980.00',
        manage: '许堉颖',
        date: '2018-09-19',
        remainDays: 8,
        status: 0
      }, {
        customer_name: '朱峰',
        customer_phone: '15622283843',
        order_num: '19054894531515',
        goods_name: '分销商城小程序(营销版+客服)',
        goods_type: '小程序',
        goods_price: '1980.00',
        manage: '许堉颖',
        date: '2018-09-19',
        remainDays: 8,
        status: 0
      }, {
        customer_name: '朱峰',
        customer_phone: '15622283843',
        order_num: '19054894531515',
        goods_name: '分销商城小程序(营销版+客服)',
        goods_type: '小程序',
        goods_price: '1980.00',
        manage: '许堉颖',
        date: '2018-09-19',
        remainDays: 8,
        status: 0
      }, {
        customer_name: '朱峰',
        customer_phone: '15622283843',
        order_num: '19054894531515',
        goods_name: '分销商城小程序(营销版+客服)',
        goods_type: '小程序',
        goods_price: '1980.00',
        manage: '许堉颖',
        date: '2018-09-19',
        remainDays: 8,
        status: 0
      }, {
        customer_name: '朱峰',
        customer_phone: '15622283843',
        order_num: '19054894531515',
        goods_name: '分销商城小程序(营销版+客服)',
        goods_type: '小程序',
        goods_price: '1980.00',
        manage: '许堉颖',
        date: '2018-09-19',
        remainDays: 8,
        status: 0
      }, {
        customer_name: '朱峰',
        customer_phone: '15622283843',
        order_num: '19054894531515',
        goods_name: '分销商城小程序(营销版+客服)',
        goods_type: '小程序',
        goods_price: '1980.00',
        manage: '许堉颖',
        date: '2018-09-19',
        remainDays: 8,
        status: 0
      }, {
        customer_name: '朱峰',
        customer_phone: '15622283843',
        order_num: '19054894531515',
        goods_name: '分销商城小程序(营销版+客服)',
        goods_type: '小程序',
        goods_price: '1980.00',
        manage: '许堉颖',
        date: '2018-09-19',
        remainDays: 8,
        status: 0
      }],
      th: [{
        name: '购买用户',
        check: true
      }, {
        name: '手机号码',
        check: true
      }, {
        name: '订单号',
        check: true
      }, {
        name: '商品名称',
        check: true
      }, {
        name: '商品类型',
        check: true
      }, {
        name: '商品金额',
        check: true
      }, {
        name: '负责人',
        check: true
      }, {
        name: '购买时间',
        check: true
      }, {
        name: '剩余天数',
        check: true
      }, {
        name: '状态',
        check: true
      }]
    }
  },
  methods: {
    columnCheck(index) {
      this.th[index].check = !this.th[index].check
      // console.log(index)
    },
    filterTag(value, row) {
      return row.type === value
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      // console.log(this.multipleSelection)
    },
    search() {
      // console.log(this.searchValue)
    },
    toSendAllMsg() {
      if (this.multipleSelection.length !== 0) {
        this.$confirm('即将发送短信给' + this.multipleSelection[0].customer_name + '等' + this.multipleSelection.length + '位客户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '发送成功!'
          })
        })
      }
    },
    toCall(row) {
      this.$confirm('即将打电话给' + row.customer_name + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '成功!'
        })
      })
    },
    toSendMsg(row) {
      this.$confirm('即将发送短信给' + row.customer_name + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '发送成功!'
        })
      })
    },
    toDelete() {
      this.$confirm('此操作将删除该订单提醒, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../styles/index.scss';
.box-1 {
  .header {
    @include flex-row(center, space-between);
    padding-bottom: 15px;
    div {
      @include flex-row(center, flex-start);
      flex-wrap: wrap;
      .do-btn {
        @extend .bg-green;
        margin-left: 6px;
      }
      .search-input {
        width: 240px;
      }
    }
  }
}
</style>

